<template>
    <div>
<!--        相关操作-->
        <div class="buttonCardLayout">
            <el-card class="box-card">
                <div style="display: inline-block;width: 100%">
<!--                批量删除-->
                    <el-button type="primary" class="batchDeleteButton"  @click="batchDeleteComment">批量删除</el-button>
<!--                根据发布人查询评论-->
                    <el-select
                            style="margin-right: 10px;"
                            v-model="queryComments_userId"
                            @change="queryAllComments"
                            filterable
                            placeholder="请选择发布人">
                        <el-option
                                v-for="user in queryNicknameOption"
                                :key="user.id"
                                :label="user.nickname"
                                :value="user.id">
                        </el-option>
                    </el-select>
<!--                根据博客查询评论-->
                    <el-select
                            style="margin-right: 10px;"
                            v-model="queryComments_blogId"
                            @change="queryAllComments"
                            filterable
                            placeholder="请选择发布人">
                        <el-option
                                v-for="blog in queryBlogTitleOption"
                                :key="blog.id"
                                :label="blog.title"
                                :value="blog.id">
                        </el-option>
                    </el-select>
                </div>

            </el-card>
        </div>
<!--        表格内容-->
        <div class="tableCardLayout" >
            <el-card class="box-card">
                <el-table
                        :data="commentData"
                        style="width: 100%;margin-bottom: 20px;min-height: 650px;"
                        row-key="id"
                        height="600"
                        @selection-change="changeSelectedIds"
                        default-expand-all
                        :tree-props="{children: 'childComments', hasChildren: 'hasChildren'}">
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            prop="createTime"
                            label="发布时间"
                            sortable
                            width="320">
                        <template slot-scope="scope">
                            {{scope.row.createTime | dateFormatFun(2)}}
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="content"
                            label="内容">
                    </el-table-column>
                    <el-table-column
                            prop="userNickname"
                            label="发布人"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="blogTitle"
                            label="所属博客"
                            width="180">
                    </el-table-column>


                    <el-table-column
                            width="125"
                            label="审核">
                        <template slot-scope="scope">
                            <el-switch
                                    v-model="scope.row.reviewStatue"
                                    @change="changeReviewStatue(scope.row)"
                                    active-color="#13ce66"
                                    inactive-color="#ff4949"
                                    :active-value="1"
                                    :inactive-value="0">
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column
                            width="320"
                            label="操作" >
                        <template slot-scope="scope">
                            <el-button type="danger"  @click="deleteCommentData(scope.row.id)">删除</el-button>
                        </template>

                    </el-table-column>
                </el-table>
            </el-card>

        </div>

<!--&lt;!&ndash;        分页设置&ndash;&gt;-->
<!--        <div class="pageCardStyle">-->
<!--            <el-card class="box-card">-->
<!--                <el-pagination-->
<!--                        @size-change="changePageSize"-->
<!--                        @current-change="changePageIndex"-->
<!--                        :page-sizes="[8, 16, 24, 32]"-->
<!--                        :page-size="8"-->
<!--                        :pager-count="5"-->
<!--                        layout="total, sizes, prev, pager, next, jumper"-->
<!--                        :total="totalCommentNum">-->
<!--                </el-pagination>-->
<!--            </el-card>-->
<!--        </div>-->


    </div>
</template>

<script>


    import {constants} from "@/common/constants";

    export default {
        name: "CommentComponent",
        data() {
            return {
                commentData: [],                   //所有的评论信息
                dialogVisible: false,           //新增评论弹出框是否展示
                selectedIds:[],                 //目前选中的id集合
                // pageIndex:1,                    //第xx页
                // pageSize:8,                     //页面大小
                totalCommentNum: 0,                //评论总的数目
                queryComments_userId:"",          //根据用户id查询评论
                queryComments_blogId:"",          //根据博客查询评论
                queryNicknameOption:[],             //所有的用户名
                queryBlogTitleOption:[],             //所有的博客tittle


            }
        },
        created() {
            this.mySetItem("breadCrumb",JSON.stringify("评论管理"));
            this.queryAllComments();
            this.queryAllUsers();
            this.queryAllBlogs();
        },
        methods:{
            //向用户发送消息
            sendMessage(userId,messageContent,type,typeId){
                let user=(localStorage.getItem('user')!=null)?JSON.parse(localStorage.getItem('user')):null;
                let message={};
                if (user!=null){
                    message.content=messageContent;
                    message.type=type;
                    message.userId=userId;
                    message.byUserId=user.id;
                    message.typeId=typeId;
                    this.request.post("/index/message/addMessage",message).then(res=>{
                        if (res.code!='200'){
                            this.$message({
                                message: res.data,
                                type: 'error'
                            });
                        }
                    })
                }else {
                    this.$message.error("当前用户不存在")
                }


            },
            //改变滑块触发的事件
            changeReviewStatue(commentData){
                this.$confirm('确定改变该评论的审核状态吗？', '系统提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    let commentReviewStatue=commentData.reviewStatue;//经过审核之后的状态（1/0）
                    let userId=commentData.userId;
                    let typeId=commentData.id
                    this.request.get("/index/comment/updateCommentReviewStatue",{
                        params:{
                            id: commentData.id,
                        }
                    }).then(res=>{
                        if (res.code=='200'){
                            this.$message({
                                message: res.data,
                                type: 'success'
                            });
                        }else {
                            this.$message({
                                message: res.data,
                                type: 'error'
                            });
                        }
                        if (commentReviewStatue==1){        //审核通过
                            this.sendMessage(userId,"您的评论审核已经通过！",constants.messageType.comment,typeId);
                        }else {
                            this.sendMessage(userId,"您的评论经审核，涉嫌违规，不予展示",constants.messageType.comment,typeId);
                        }
                        this.queryAllComments();
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消该操作'
                    });
                    this.queryAllComments();
                });
            },
            //查询所有的用户
            queryAllUsers(){
                this.request.get("/index/user/queryAllUsers").then(res=>{
                    if (res.code=="200"){
                        this.queryNicknameOption=res.data;
                        this.queryNicknameOption.unshift({
                            id:0,
                            nickname:'默认'
                        })
                    }else{
                        this.$message({
                            message: res.data,
                            type: 'warning'
                        });
                    }
                })
            },
            //查询所有的博客
            queryAllBlogs(){
                this.request.get("/index/blog/queryAllBlogs").then(res=>{
                    if (res.code=="200"){
                        this.queryBlogTitleOption=res.data.blogs.map(v => ({ id: v.id, title: v.title }));
                        this.queryBlogTitleOption.unshift({
                            id:0,
                            title:'默认'
                        })
                    }else{
                        this.$message({
                            message: res.data,
                            type: 'warning'
                        });
                    }
                })
            },
            //查询所有的评论信息
            queryAllComments(){
                this.request.get("/index/comment/queryAllComments",{
                    params:{
                        // pageIndex: this.pageIndex,
                        // pageSize: this.pageSize,
                        queryCommentUserId: (this.queryComments_userId==0||this.queryComments_userId=="")?null:this.queryComments_userId,
                        queryCommentBlogId: (this.queryComments_blogId==0||this.queryComments_blogId=="")?null:this.queryComments_blogId,
                    }
                }).then(res=>{
                    if (res.code=="200"){
                        this.commentData=res.data.comments;
                        this.totalCommentNum=res.data.totalCommentNum;
                    }else if(res.code=="301"){
                        this.commentData=[];
                        this.$message({
                            message: res.data,
                            type: 'warning'
                        });
                    }
                })
            },
            //删除评论
            deleteCommentData(id){
                this.request.get("/index/comment/deleteComment", {
                    params:{
                        id: id
                    }
                }).then(res=>{
                    if (res.code=='200'){
                        this.$message({
                            message: res.data,
                            type: 'success'
                        });
                        this.queryAllComments();
                    }else {
                        this.$message({
                            message: res.data,
                            type: 'error'
                        });
                    }
                })
            },
            //批量删除评论
            batchDeleteComment(){
                this.request.post("/index/comment/batchDeleteComment",this.selectedIds).then(res=>{
                    if (res.code=='200'){
                        this.$message({
                            message: res.data,
                            type: 'success'
                        });
                        this.queryAllComments();
                    }else {
                        this.$message({
                            message: res.data,
                            type: 'error'
                        });
                    }
                })
            },
            //改变选中的行时调用的方法
            changeSelectedIds(ids){
                this.selectedIds=ids.map(v =>v.id)
            },
            //改变分页中的页面大小
            // changePageSize(newPageSize){
            //     this.pageSize=newPageSize;
            //     this.queryAllComments();
            // },
            //改变当前页的序号
            // changePageIndex(newPageIndex){
            //     this.pageIndex=newPageIndex;
            //     this.queryAllComments();
            // },

        }
    }
</script>

<style scoped>
    .buttonCardLayout{
        padding:  10px;


    }

    .dialog_title{
        text-align: right;
    }

    .dialog_title_icon{
        display: inline-block;
        margin: 0px 5px;
        cursor: pointer;
        pointer-events: auto;
    }

    .commentContentStyle{
        padding: 10px 0px ;
    }

    .tableCardLayout{
        padding:  0px 10px 10px 10px;
    }

    .pageCardStyle{
        padding:  0px 10px 10px 10px;
        text-align: center;
    }

    .allowCommentStyle{
        padding-left: 10px;
        padding-right: 10px;
        line-height: 40px;
        font-size: 20px;
    }

    .addButton{
        width: 100px;
        border-radius: 10px;
        background: #63b0f4c2;
        border-color: #B5D0EC;
        margin-right: 10px;
        margin-left: 0px;
    }

    .batchDeleteButton{
        width: 100px;
        border-radius: 10px;
        background: rgba(232, 87, 108, 0.47);
        border-color: #d08dba5c;
        margin-right: 10px;
    }

    .queryInput{
        display: inline-block;
        width: 250px;
        margin-right: 10px;
    }

    .mavonEditorDialog{
        max-height: 400px;
        min-height: 400px;
    }




</style>
